<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新能源大数据精细化分析与创新服务平台</title>
    <link rel="stylesheet" href="../libs/OpenLayers/ol.css" type="text/css">

    <script type="text/javascript">
        htconfig = {
            Default: {
                paletteTitleBackground: 'rgb(240,239,238)',
                paletteTitleHoverBackground: 'rgb(231,231,231)',
                paletteTitleLabelColor: 'rgb(138, 138, 138)',
                paletteItemSelectBackground: '',
                paletteItemHoverBorderColor: 'rgb(138, 138, 138)',

                toolTipBackground: 'rgb(255, 255, 255)',

                dialogButtonBackground: 'rgb(231, 76, 60)',
                dialogButtonSelectBackground: 'rgb(196, 65, 51)',
                dialogButtonLabelColor: '#fff',

                buttonBackground: '',
                buttonSelectBackground: 'rgb(231, 231, 231)',
                buttonLabelColor: 'rgb(159, 159, 159)',
                comboBoxLabelColor: 'rgb(159, 159, 159)',
                comboBoxSelectBackground: 'rgb(138, 138, 138)'
            },
            Color: {
                titleBackground: '#076186', // 指定HT所有组件的标题栏的背景色，如面板，对话框，AccordionView等
                titleIconBackground: 'rgb(186, 186, 186)', // 指定HT所有组件的标题ICON的颜色，如面板，对话框，AccordionView等
                headerBackground: '#DAECF4' // 指定HT所有组件的header背景色，如表格表头、工具条等
            }
        };
    </script>
    <script src='../libs/OpenLayers/ol-debug.js'></script>
    <script src='../libs/OpenLayers/GraphViewControl.js'></script>


    <script src='../libs/core/ht.js'></script>
    <script src='../libs/plugin/ht-vector.js'></script>
    <script src='../libs/core/ht-ui.js'></script>

    <script src='../libs/plugin/ht-palette.js'></script>
    <script src='../libs/plugin/ht-dialog.js'></script>
    <script src='../libs/plugin/ht-cssanimation.js'></script>
    <script src='../libs/plugin/ht-edgetype.js'></script>
    <script src="../libs/plugin/ht-obj.js"></script>
    <script src='../libs/plugin/ht-form.js'></script>


    <script src='../configs/htconfig.js'></script>

    <!-- <script src="../libs/china.js"></script> -->
    <script src="../libs/echarts.min.js"></script>
    <script src='../libs/echarts.js'></script>
    <script src='../libs/jquery-3.4.1.min.js'></script>
    <script src='../libs/echarts.js'></script>
    <script src='../libs/buckle.js'></script>
    <script src='../libs/knU3sXefAa5Q.js'></script>
    <script src="../configs/urlConfig.js"></script>
    <script src='../libs/buckle.js'></script>
    <script src='../libs/ht-animation.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .mapDiv {
            height: 100%;
            background-color: #FCF9F2;
        }
    </style>
    <script type="text/javascript">
//        var url = "http://172.16.11.150/epplatform/v1/";
          var url=attributeConfig.url+'/epplatform/v1/';
        graphViewControl = new GraphViewControl(); // 自定义控件，作为 openlayers 地图上自定义控件
        graphView = graphViewControl.getGraphView(); // 获取拓扑图组件
        var dataModel = graphView.getDataModel();
        var startId = 0; //报警信息播放
        var maxPageNum = 0; //报警信息播放
        var showTableData = [];
        var tabledata = []; //循环报警事故记录
        var arr2 = [{
            name: '张家口',
            level: '1',
            value: [114.90, 40.76],
            station: '张家口',
            content: '风电机组拖网预警'
        }, {
            name: '廊坊市',
            level: '2',
            value: [116.68, 39.54],
            station: '廊坊市',
            content: '风电机组拖网预警'
        }, {
            name: '承德',
            value: [117.96, 40.95],
            station: '张家口',
            level: '1',
            content: '风电机组拖网预警'
        }];

        function init2() {
            graphView.deserialize('displays/冀北/涉网/powergr.json', function (json, dm, gv, datas) {
                if (json.title) document.title = json.title;

                //  电站属性
                var dianzhanshuxing = dataModel.getDataByTag('dianzhanshuxing');
                var dval = updateDataModel(url + 'electricStationProperties');
                dianzhanshuxing.a('ht.dataSource', dval);

                //获取时间数据
                var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
                var yesday = new Date(time); // 获取的是前一天日期
                //字符串拼接转格式：例如2019-08-19
                var today = yesday.getFullYear() + "-" + (yesday.getMonth() + 1) + "-" + yesday.getDate();
                dataModel.getDataByTag('todayTime1').a({
                    'ht.value': today
                });
                var afterTomorrow = yesday.getFullYear() + "-" + (yesday.getMonth() + 1) + "-" + (yesday
                    .getDate() + 1);
                dataModel.getDataByTag('todayTime2').a({
                    'ht.value': afterTomorrow
                });

                //获取第一个时间框里的时间
                var dataTime1 = dm.getDataByTag('todayTime1');
                var time1 = dataTime1.a('ht.value');
                var secondsTime1 = new Date(time1).getTime();
                var secondsTimeOne = secondsTime1;

                //获取第二个时间框里的时间
                var dataTime2 = dm.getDataByTag('todayTime2');
                var time2 = dataTime2.a('ht.value');
                var secondsTime2 = new Date(time2).getTime();
                var secondsTimeTwo = secondsTime2;
                var times2 = secondsTimeOne + "&endTime=" + secondsTimeTwo;

                //预警场站分布
                var changNum = dataModel.getDataByTag('changNum');
                var val1 = new Array();
                val1 = updateDataModel(attributeConfig.url2 + times2);
                var list1 = new Array();

                for (var i = 0; i < val1.length; i++) {
                    var obj = new Object();
                    obj.name = val1[i].electricStationName;
                    obj.value = val1[i].count;
                    list1.push(obj);
                }
                changNum.a('data', list1);

                //预警次数分布
                var changOrder = dataModel.getDataByTag('changOrder');
                var val2 = new Array();
                var data = new Array();
                var ydata = new Array();
                val2 = updateDataModel(attributeConfig.url3 + times2);
                for (var i = 0; i < val2.length; i++) {
                    var obj = new Object();
                    obj.name = val2[i].electricStationName;
                    ydata.push(obj.name);
                    obj.value = val2[i].count;
                    data.push(obj.value);
                }
                changOrder.a('data', data.reverse());
                changOrder.a('ydata', ydata.reverse());

                //发电单元脱网数量
                var colors = ["#71e095", "#8db2ff", "#ff4e6b", "#ff9751", "#ffc35d",];
                var changTuo = dataModel.getDataByTag('changTuo');
                var val3 = new Array();
                var list3 = new Array();
                val3 = updateDataModel(attributeConfig.url5 + times2);
                for (var i = 0; i < val3.length; i++) {
                    var obj = new Object();
                    obj.name = val3[i].electricStationName;
                    obj.value = val3[i].count;
                    list3.push(obj);
                }
                changTuo.a('data', list3);
                changTuo.a('colors', colors);

                //预警,脱网事故记录
                var lunbo = dataModel.getDataByTag('lunbo');
                var val4 = new Array();
                var list4 = new Array();
                val4 = updateDataModel(attributeConfig.url6 + times2);
                if (val4.length > 1) {
                    for (var i = 0; i < val4.length; i++) {
                        var obj = new Object();
                        obj.icons = "";
                        obj.times = val4[i].date;
                        obj.contents = val4[i].alertOrAccidentInfo;
                        list4.push(obj);
                    }
                } else {
                    var obj = new Object();
                    obj.icons = "";
                    obj.times = "";
                    obj.contents = "暂无信息";
                    list4.push(obj);
                }
                tabledata = list4;
                running(tabledata);
                //初始化表格
                changeData(tabledata, startId, showTableData); //解决初始化空白
                if (tabledata.length > 4) {
                    setInterval(function () {
                        startId = changeData(tabledata, startId, showTableData)
                    }, 3 * 1000);
                };

                ////  点击事件
                graphView.addInteractorListener(e => {

                    //获取第一个时间框里的时间
                    var dataTime1 = dm.getDataByTag('todayTime1');
                    var time1 = dataTime1.a('ht.value');
                    var secondsTime1 = new Date(time1).getTime();
                    var secondsTimeOne = secondsTime1;

                    //获取第二个时间框里的时间

                    var dataTime2 = dm.getDataByTag('todayTime2');
                    var time2 = dataTime2.a('ht.value');
                    var secondsTime2 = new Date(time2).getTime();
                    var secondsTimeTwo = secondsTime2;

                    var times = secondsTimeOne + "&endTime=" + secondsTimeTwo;


                    //点击后切换echarts图
                    var bl1 = graphView.dm().getDataByTag('bl1');
                    var v1 = bl1.s('2d.visible');
                    var br1 = graphView.dm().getDataByTag('br1');
                    var v2 = br1.s('2d.visible');
                    var bl3 = graphView.dm().getDataByTag('bl3');
                    var v3 = bl3.s('2d.visible');
                    var br4 = graphView.dm().getDataByTag('br4');
                    var v4 = br4.s('2d.visible');

                    if (v3 && e.kind === 'clickData' && e.data && e.data.getTag() === 'bl2') {
                        setData(attributeConfig.url2 + times, attributeConfig.url3 + times);

                    } else if (v4 && e.kind === 'clickData' && e.data && e.data.getTag() === 'bl2') {
                        setData(attributeConfig.url8 + times, attributeConfig.url9 + times);

                    } else if (v3 && e.kind === 'clickData' && e.data && e.data.getTag() === 'br2') {

                        setData(attributeConfig.url4 + times, attributeConfig.url7 + times);

                    } else if (v4 && e.kind === 'clickData' && e.data && (e.data.getTag() === 'br2')) {

                        setData(attributeConfig.url10 + times, attributeConfig.url11 + times);


                    } else if (v1 && e.kind === 'clickData' && e.data && (e.data.getTag() === 'bl4')) {

                        setData(attributeConfig.url2 + times, attributeConfig.url3 + times);

                    } else if (v2 && e.kind === 'clickData' && e.data && (e.data.getTag() === 'bl4')) {

                        setData(attributeConfig.url4 + times, attributeConfig.url7 + times);
                    } else if (v1 && e.kind === 'clickData' && e.data && (e.data.getTag() === 'br3')) {

                        setData(attributeConfig.url8 + times, attributeConfig.url9 + times);
                    } else if (v2 && e.kind === 'clickData' && e.data && (e.data.getTag() === 'br3')) {
                        setData(attributeConfig.url10 + times, attributeConfig.url11 + times);

                    }
                })

            });
        }
        var arr = [];

        function init(arr) {
            init2();
            var fullScreenControl = new ol.control.FullScreen();
            var extent = ol.extent.boundingExtent([
                [114.68, 38.71],
                [117.19, 42.61]
            ]);
            let maxExtent = ol.extent.boundingExtent([
                [119.045643, 42.397608],
                [114.514793, 38.042225]
            ]);
            var center = ol.proj.transform([116.88, 40.72], 'EPSG:4326', 'EPSG:3857');
            var mapDiv = document.getElementById('mapDiv');
            map = new ol.Map({
                target: 'mapDiv', // 地图容器
                controls: ol.control.defaults().extend([
                    graphViewControl, // 自定义拓扑控件
                    new ol.control.ScaleLine(), // 比例尺控件
                ]),
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            //瓦片的URL,由于只有冀北地图
                            //  <!--url: 'http://localhost:8080/maps/{z}/{y}/{x}.png' -->
                            url: 'http://24.43.105.10:18084/maps2/{z}/{y}/{x}.png'
                        })
                    })
                ], // 图层
                view: new ol.View({ // 地图视图
                    // projection:this.projection ,// 投影 'EPSG:4326'
                    center: center, // 视图的初始中心 中心的坐标系由projection选项指定
                    zoom: 8, // 缩放级别 用于计算视图的初始分辨率
                    minZoom: 8,
                    extent: ol.proj.transformExtent(maxExtent, 'EPSG:4326', 'EPSG:3857')
                }),
            });


            //map.addControl(fullScreenControl);
            //把地图设置到最底层
            var view = graphView.getView();
            view.className = 'graphView';
            borderPane = new ht.widget.BorderPane();
            borderPane.setCenterView(mapDiv);
            borderPane.addToDOM(); // 将面板组件添加到 body 中
            borderPane.addViewListener(function (e) {
                if (e.kind !== 'validate')
                    return; // 刷新事件
                map.updateSize(); // 用第三方插件的时候强制刷新地图
            });
            createIcon(arr);
        }


        // 设置属性栏外部的矩形方框的位置和大小
        function getScreenRect(graphView, node, preferredSize) {
            var tx = graphView.tx(), // 获取水平平移值
                ty = graphView.ty(), // 设置垂直平移值
                pos = node.getPosition(), // 获取节点的位置
                width = node.getWidth(), // 获取节点的宽度
                height = node.getHeight(); // 获取节点的高度

            return { // 返回矩形的位置和宽高，显示在节点的正上方的位置
                x: tx + pos.x - preferredSize.width / 2,
                y: ty + pos.y - preferredSize.height - height,
                width: width,
                height: height
            }
        }

        //--------------显示定位标签(openlayer层)------------
        function createIcon(arr) {
            var iconFeatures = [];
            //    val = updateDataModel(attributeConfig.url1);    获取地图数据
            if (arr.length > 0) {
                for (var i = 0; i < arr.length; i++) { //此处循环方式要修改
                    j = arr[i].value[0];
                    w = arr[i].value[1];
                    var iconFeature = new ol.Feature({
                        geometry: new ol.geom.Point(ol.proj.transform([j, w], 'EPSG:4326',
                            'EPSG:3857')),
                        name: arr[i].name, //此处可以随意添加字段以获得你想要的信息
                        level: arr[i].level, //报警的级别
                        starttime: "", //开始时间
                        j: j, //经度
                        w: w, //纬度
                        population: 4000,
                        rainfall: 500
                    });
                    iconFeatures.push(iconFeature);
                }
            }
            var vectorSource = new ol.source.Vector({
                features: iconFeatures
            });

            var iconStyle = new ol.style.Style({
                image: new ol.style.Icon(({
                    anchor: [0.5, 0.5],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    opacity: 0.75,
                    scale: 0.8,
                    src: '../libs/OpenLayers/hongyuan.png'
                }))
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                style: iconStyle
            });

            vectorLayer2 = new ol.layer.Vector({ //初始化矢量图层
                source: new ol.source.Vector({
                    projection: 'EPSG:4326',
                    url: '../libs/OpenLayers/zjk.json', //从文件加载边界等地理信息
                    format: new ol.format.GeoJSON()
                }),
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#81aad8',
                        size: 2
                    }),
                    fill: new ol.style.Fill({
                        color: '#81aad866'
                    })
                })
            });

            vectorLayer3 = new ol.layer.Vector({ //初始化矢量图层
                source: new ol.source.Vector({
                    projection: 'EPSG:4326',
                    url: '../libs/OpenLayers/ts.json', //从文件加载边界等地理信息
                    format: new ol.format.GeoJSON()
                }),
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#81aad8',
                        size: 2
                    }),
                    fill: new ol.style.Fill({
                        color: '#81aad866'
                    })
                })
            });

            vectorLayer4 = new ol.layer.Vector({ //初始化矢量图层
                source: new ol.source.Vector({
                    projection: 'EPSG:4326',
                    url: '../libs/OpenLayers/qhd.json', //从文件加载边界等地理信息
                    format: new ol.format.GeoJSON()
                }),
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#81aad8',
                        size: 2
                    }),
                    fill: new ol.style.Fill({
                        color: '#81aad866'
                    })
                })
            });

            vectorLayer5 = new ol.layer.Vector({ //初始化矢量图层
                source: new ol.source.Vector({
                    projection: 'EPSG:4326',
                    url: '../libs/OpenLayers/cd.json', //从文件加载边界等地理信息
                    format: new ol.format.GeoJSON()
                }),
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#81aad8',
                        size: 2
                    }),
                    fill: new ol.style.Fill({
                        color: '#81aad866'
                    })
                })
            });
            vectorLayer6 = new ol.layer.Vector({ //初始化矢量图层
                source: new ol.source.Vector({
                    projection: 'EPSG:4326',
                    url: '../libs/OpenLayers/lf.json', //从文件加载边界等地理信息
                    format: new ol.format.GeoJSON()
                }),

                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#81aad8',
                        size: 2
                    }),
                    fill: new ol.style.Fill({
                        color: '#81aad866'
                    })
                })
            });


            //点击事件
            if (arr.length > 0) {
                map.on('click', function (evt) {
                    var pixel = map.getEventPixel(evt.originalEvent);
                    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                        return feature;
                    });
                    if (feature) {
                        var coordinates = feature.getGeometry().getCoordinates();
                        var position2 = map.getPixelFromCoordinate(coordinates);
                        var wgs3 = ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');

                        var detail2 = dataModel.getDataByTag('detail2');
                        detail2.s('2d.visible', false);
                        var detail3 = dataModel.getDataByTag('detail3');
                        detail3.s('2d.visible', false);
                    } else {
                        return;
                    }
                })
            }

            if (arr.length > 0) {
                map.on('pointermove', function (evt) {
                    var pixel = map.getEventPixel(evt.originalEvent);
                    var detail2 = dataModel.getDataByTag('detail2');
                    var detail3 = dataModel.getDataByTag('detail3');
                    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                        if(feature.get('level') == 'city') {
                            detail3.s('2d.visible', false);
                            detail2.s('2d.visible', false);
                        } else {
                            var coordinates = feature.getGeometry().getCoordinates();
                            var position2 = map.getPixelFromCoordinate(coordinates);
                            var wgs3 = ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
                            var name = feature.get('name');
                            var level = feature.get('level');
                            if (level == "1") {
                                detail3.s('2d.visible', false);
                                console.log('打印===', level === 1);
                                for (i = 0; i < arr.length; i++) {
                                    if (arr[i].name == name) {
                                        detail2.a('title', arr[i].station);
                                        detail2.a('content', arr[i].content);
                                        detail2.setPosition(position2[0] + 50, position2[1] + 100);
                                        detail2.s('2d.visible', true);
                                    }
                                }
                            } else {
                                detail2.s('2d.visible', false);
                                for (i = 0; i < arr.length; i++) {
                                    if (arr[i].name == name) {
                                        detail3.a('title', arr[i].station);
                                        detail3.a('content', arr[i].content);
                                        detail3.setPosition(position2[0] + 50, position2[1] + 100);
                                        detail3.s('2d.visible', true);
                                    }
                                }
                            }
                        }
                            return feature;
                    });
                    if (feature) {
                        
                       

                    } else {
                        return;
                    }
                })
            }

            map.addLayer(vectorLayer2);
            map.addLayer(vectorLayer3);
            map.addLayer(vectorLayer4);
            map.addLayer(vectorLayer5);
            map.addLayer(vectorLayer6);
            map.addLayer(vectorLayer);
        }


        function getFun() {
            let pan;
            map.getInteractions().forEach(function (element, index, array) {
                if (element instanceof ol.interaction.DragPan) {
                    pan = element;
                }
            });
            return pan;

        }



        //  预警场站个数与TOP5的数据接入
        function setData(u1, u2) {
            var changNum = dataModel.getDataByTag('changNum');
            var val6 = new Array();
            val6 = updateDataModel(u1);
            var list6 = new Array();

            for (var i = 0; i < val6.length; i++) {
                var obj = new Object();
                obj.name = val6[i].electricStationName;
                obj.value = val6[i].count;
                list6.push(obj);
            }
            changNum.a('data', list6);


            var changOrder = dataModel.getDataByTag('changOrder');
            var val2 = new Array();
            var data = new Array();
            var ydata = new Array();
            val2 = updateDataModel(u2);
            for (var i = 0; i < val2.length; i++) {
                var obj = new Object();
                obj.name = val2[i].electricStationName;
                ydata.push(obj.name);
                obj.value = val2[i].count;
                data.push(obj.value);
            }
            changOrder.a('data', data);
            changOrder.a('ydata', ydata);

        }

        // 获取后台数据
        var values = new Array();

        function updateDataModel(geturl) {
            $.ajax({
                type: "GET",
                async: false, //同步请求
                url: geturl,
                contentType: "application/json; charset=utf-8",
                success: function (data) {

                    if (data.code == 0) {
                        values = data.data;
                    }
                },
                error: function () {
                    alert("失败，请稍后再试！");
                }
            });
            return values;
        }

        //涉网风险/事故轮播
        function running(tabledata) {
            if (tabledata.length == 1) {
                maxPageNum = 1;
            } else if (tabledata.length == 2) {
                maxPageNum = 2;
            } else if (tabledata.length == 3) {
                maxPageNum = 3;
            } else if (tabledata.length == 4) {
                maxPageNum = 4;
            } else {
                maxPageNum = 4;
            }

            for (var i = 0; i < tabledata.length; i++) {
                var tmp = tabledata[i];
                tmp['id'] = i;
            }
            return tabledata;
        }
        //涉网风险预警变换数据
        function changeData(tabledata, startId, showTableData) {
            showTableData = [];
            var flag = true;
            for (var i = 0; i < maxPageNum; i++) {
                if (startId + i >= tabledata.length) {
                    startId = 0;
                    flag = false;
                    break;
                }
                showTableData[i] = tabledata[startId + i];
            }
            var table = dataModel.getDataByTag('lunbo');
            table.a({
                'ht.dataSource': showTableData
            });
            if (flag) {
                startId = startId + maxPageNum;
            }
            return startId;
        }
        //   获取页面查询到的数据
        var arr3;

        function getData(arr3) {
            var area = dataModel.getDataByTag('area');
            var biandianzhan1 = dataModel.getDataByTag('biandianzhan');
            var value1 = area.a('ht.value');
            var value2 = biandianzhan1.a('ht.value');
            var URL = attributeConfig.url1 + '?&areaCode' + value1 + '&substationCode' + value2;
            let layers = map.getLayers().getArray();
            if (layers.length > 0) {
                for (i = 1; i < layers.length; i++) {
                    layers[i].getSource().clear();
                }
            }
            createIcon(arr3);
        }

        var attributeConfig = {
            url1: url + "alertMap",
            url5: url + "countOffGridUnits?startTime=",
            url6: url + "alertOrAccidentRecords?startTime=",
            url2: url + "alertsCount?alertType=1&stationType=1&startTime=",
            url3: url + "alertsCount/top5?alertType=1&stationType=1&startTime=",
            url4: url + "alertsCount?alertType=2&stationType=1&startTime=",
            url7: url + "alertsCount/top5?alertType=2&stationType=1&startTime=",
            url8: url + "alertsCount?alertType=1&stationType=2&startTime=",
            url9: url + "alertsCount/top5?alertType=1&stationType=2&startTime=",
            url10: url + "alertsCount?alertType=2&stationType=2&startTime=",
            url11: url + "alertsCount/top5?alertType=2&stationType=2&startTime=",
            url12: url + "substations",
            url20: url + "areas",
        };
    </script>
</head>

<body onload="init(arr2)">
    <div class="mapDiv" id="mapDiv"></div>
</body>

</html>
